<template>
  <div>
    <SchemaForm :schema="schema" :model="spuFormData" :rules="spuFormRules">
      <template #spuSaleAttrList>
        <el-select placeholder="请选择销售属性">
          <el-option label="颜色" value="11"></el-option>
          <el-option label="版本" value="22"></el-option>
        </el-select>
        <el-button type="primary" class="btn">添加销售属性</el-button>
        <el-table border class="table">
          <el-table-column
            type="index"
            width="60"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column label="销售属性名"></el-table-column>
          <el-table-column label="销售属性值"></el-table-column>
          <el-table-column label="操作">
            <el-button>删除</el-button>
          </el-table-column>
        </el-table>
      </template>

      <template #btns="{ validate }">
        <el-button type="primary" @click="validate(submit)">保存</el-button>
        <el-button>取消</el-button>
      </template>
    </SchemaForm>
    <Spu />
  </div>
</template>

<script lang="ts" setup>
import Spu from "./views/spu/index.vue";
import SchemaForm from "./components/SchemaForm/index.vue";

import { ref, reactive } from "vue";

const schema = ref([
  {
    // 要渲染的表单组件
    type: "input",
    // 表单项规则，使用哪个表单数据
    model: "spuName",
    // 表单项的名称
    label: "SPU名称",
    // 遍历的key属性
    key: "spuName",
    // 表单项的属性
    props: {
      placeholder: "请输入SPU名称",
    },
    colSpan: 8,
  },
  {
    type: "input",
    // 表单项规则，使用哪个表单数据
    model: "spuDesc",
    colSpan: 8,
    // 表单项的名称
    label: "SPU描述",
    // 遍历的key属性
    key: "spuDesc",
    // 表单项的属性
    props: {
      placeholder: "请输入SPU描述",
      type: "textarea",
    },
  },
  {
    // 要渲染的表单组件
    type: "select",
    colSpan: 8,
    selectOptions: [
      { label: "华为", value: 111 },
      { label: "苹果", value: 222 },
    ],
    // 表单项规则，使用哪个表单数据
    model: "tmId",
    // 表单项的名称
    label: "SPU品牌",
    // 遍历的key属性
    key: "tmId",
    // 表单项的属性
    props: {
      placeholder: "请选择SPU品牌",
    },
  },
  {
    // 要渲染的表单组件
    type: "upload",
    // 表单项规则，使用哪个表单数据
    model: "spuImageList",
    // 表单项的名称
    label: "SPU图片",
    // 遍历的key属性
    key: "spuImageList",
    // 表单项的属性
    props: {
      placeholder: "请选择上传SPU图片",
      action: "https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15",
    },
  },
  {
    // 要渲染的表单组件
    type: "slot",
    slot: "spuSaleAttrList",
    // 表单项规则，使用哪个表单数据
    model: "spuSaleAttrList",
    // 表单项的名称
    label: "SPU销售属性",
    // 遍历的key属性
    key: "spuSaleAttrList",
    // 表单项的属性
    props: {},
  },
  {
    // 要渲染的表单组件
    type: "slot",
    slot: "btns",
    key: "btns",
  },
]);

// 表单数据
const spuFormData = reactive({
  spuName: "",
  spuDesc: "",
  tmId: undefined,
  spuImageList: [],
  // spuSaleAttrList: [],
});
// 表单校验规则
const spuFormRules = reactive({
  // 校验规则的名称要和数据名称一致
  spuName: [{ required: true, message: "请输入SPU名称", trigger: "blur" }],
  spuDesc: [{ required: true, message: "请输入SPU描述", trigger: "blur" }],
  tmId: [{ required: true, message: "请选择SPU品牌", trigger: "change" }],
  // spuImageList: [{ required: true, message: "请上传SPU图片" }],
});

const submit = () => {
  console.log("通过了");
};
</script>

<style scoped lang="scss"></style>
